import {
  AreaChartDemos,
  DatePickerInputDemos,
  DatesProviderDemos,
  DonutChartDemos,
  PieChartDemos,
  TitleDemos,
} from '@docs/demos';
import { Layout } from '@/layout';
import { MDX_DATA } from '@/mdx';

export default Layout(MDX_DATA.Changelog750);

## DonutChart component

New [DonutChart](/charts/donut-chart) component:

<Demo data={DonutChartDemos.usage} />

## PieChart component

New [PieChart](/charts/pie-chart) component:

<Demo data={PieChartDemos.usage} />

## @mantine/dates value formatter

[DatePickerInput](/dates/date-picker-input), [MonthPickerInput](/dates/month-picker-input) and
[YearPickerInput](/dates/year-picker-input) now support `valueFormatter` prop.

`valueFormatter` is a more powerful alternative to `valueFormat` prop.
It allows formatting value label with a custom function.
The function is the same for all component types (`default`, `multiple` and `range`)
– you need to perform additional checks inside the function to handle different types.

Example of using a custom formatter function with `type="multiple"`:

<Demo data={DatePickerInputDemos.valueFormatter} />

## @mantine/dates consistent weeks

You can now force each month to have 6 weeks by setting `consistentWeeks: true` on
[DatesProvider](/dates/getting-started). This is useful if you want to avoid layout
shifts when month changes.

<Demo data={DatesProviderDemos.consistentWeeks} />

## Charts series label

It is now possible to change series labels with `label` property
in `series` object. This feature is supported in [AreaChart](/charts/area-chart),
[BarChart](/charts/bar-chart) and [LineChart](/charts/line-chart) components.

<Demo data={AreaChartDemos.seriesLabels} />

## Charts value formatter

All `@mantine/charts` components now support `valueFormatter` prop, which allows
formatting value that is displayed on the y axis and inside the tooltip.

<Demo data={AreaChartDemos.valueFormatter} />

## Headings text wrap

New [Title](/core/title) `textWrap` prop sets [text-wrap](https://developer.mozilla.org/en-US/docs/Web/CSS/text-wrap)
CSS property. It controls how text inside an element is wrapped.

<Demo data={TitleDemos.textWrap} />

You can also set `textWrap` on [theme](/theming/theme-object):

```tsx
import { createTheme, MantineProvider, Title } from '@mantine/core';

const theme = createTheme({
  headings: {
    textWrap: 'wrap',
  },
});

function Demo() {
  return (
    <MantineProvider theme={theme}>
      <Title>Some very long title that should wrap</Title>
    </MantineProvider>
  );
}
```

If set on theme, `textWrap` is also applied to headings in [Typography](/core/typography)

## mod prop

All components now support `mod` prop, which allows adding data attributes to
the root element:

```tsx
import { Box } from '@mantine/core';

<Box mod="data-button" />;
// -> <div data-button />

<Box mod={{ opened: true }} />;
// -> <div data-opened />

<Box mod={{ opened: false }} />;
// -> <div />

<Box mod={['button', { opened: true }]} />;
// -> <div data-button data-opened />

<Box mod={{ orientation: 'horizontal' }} />;
// -> <div data-orientation="horizontal" />
```

## Documentation updates

- New [testing with Vitest guide](/guides/vitest/)
- [NativeSelect](/core/native-select/#with-dividers) with dividers demo
- [Popover](/core/popover/#middlewares) `shift` and `flip` middlewares documentation
- [Combobox](/core/combobox/#popover-props) props related to [Popover](/core/popover) documentation
- [Loading styles from CDN guide](/styles/mantine-styles/#loading-styles-from-cdn)
- [Anchor](/core/anchor/#text-props) now includes additional documentation on how to use [Text](/core/text) props
- [Pagination](/core/pagination) now includes props tables for all compound components
- A more detailed breakdown of [browser support](/about/#browser-support) has been added to the about page

## Help center updates

New articles added to the [help center](https://help.mantine.dev):

- [Can I use Mantine with Astro?](https://help.mantine.dev/q/can-i-use-mantine-with-astro)
- [How can I contribute to the library?](https://help.mantine.dev/q/how-can-i-contribute)
- [How can I add dynamic CSS styles?](https://help.mantine.dev/q/dynamic-css-styles)
- [How can I load fonts in Next.js?](https://help.mantine.dev/q/next-load-fonts)
- [How can I load fonts in Vite?](https://help.mantine.dev/q/vite-load-fonts)
- [Is there a floating action button component?](https://help.mantine.dev/q/floating-action-button)
- [How to change inputs placeholder color?](https://help.mantine.dev/q/inputs-placeholder-color)
- [I do not have styles in my dates components...](https://help.mantine.dev/q/dates-missing-styles)

## Other changes

- [Checkbox.Group](/core/checkbox), [Radio.Group](/core/radio) and [Switch.Group](/core/switch) now support `readOnly` prop
- [ActionIcon](/core/action-icon) now has `loading` state animation
- [SegmentedControl](/core/segmented-control) now supports `withItemsBorder` prop which allows removing border between items
- [Progress](/core/progress) now supports `transitionDuration` prop which controls section width animation duration
- [Textarea](/core/textarea) and [JsonInput](/core/json-input) components now support `resize` prop, which allows setting `resize` CSS property on the input
- `@mantine/hooks` package now exports [readLocalStorageValue and readSessionStorageValue](/hooks/use-local-storage/#read-storage-value) function to get value from storage outside of React components
